<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>车位预约</span>
            </div>
            <div class="text item">
                <el-form :model="orderFrom" label-width="600px">
                    <el-form-item label="车牌号:">
                        <el-select v-model="orderFrom.carNumber" placeholder="请选择">
                            <el-option v-for="item in carNumbers"
                                :key="item.carId"
                                :label="item.carNumber"
                                :value="item.carId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车位编号: ">
                        <span v-text="orderFrom.rentalCarportId"></span>
                    </el-form-item>
                    <el-form-item label="停车费用: ">
                        <span>{{ orderFrom.rentalCarportUnitPrice }} (元 /小时 )</span>
                    </el-form-item>
                    <el-form-item label="入场时间: ">
                        <div class="demonstration">
                            <el-date-picker
                                    v-model="orderFrom.orderBeginTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    :picker-options="beginPickerOptions"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="离场时间: ">
                        <div class="demonstration">
                            <el-date-picker
                                v-model="orderFrom.orderEndTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                :picker-options="endPickerOptions"
                                placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="insertOrder">立即预约</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
    import $ from "jquery"
    export default {
        name: "CarportInfo",
        data() {
            return {
                // 发布车位信息
                rentalCarportInfo: {},
                // 预约表单
                orderFrom: {},
                // 车牌列表
                carNumbers: [],
                // 开始时间选项
                beginPickerOptions: {
                    disabledDate: time => {
                        // 小于当前时间 || 小于车位开租时间
                        return time.getTime() < Date.now() || time.getTime() < this.orderFrom.rentalCarportBeginTime;
                    }
                },
                // 结算时间选项
                endPickerOptions: {
                    disabledDate: time => {
                        // 大于车位结束时间禁用
                        return time.getTime() > this.orderFrom.rentalCarportEndTime;
                    }
                },
            }
        },
        mounted() {
            this.getCarportInfo();
            this.listCars();
        },
        methods: {
            // 查询车位详细信息
            getCarportInfo() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "carport/getRentalCarportInfo",
                    data: {
                        "rentalCarportId": this.$route.params.rentalCarportId
                    },
                    success(r) {
                        that.orderFrom = r.res;
                        that.rentalCarportInfo = r.res;
                    },
                    error(r) {
                        this.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 获取用户所有车辆信息
            listCars() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "carport/getCars",
                    headers: {
                        "Access-Token": sessionStorage.getItem("Access-Token").toString()
                    },
                    success(r) {
                        console.log(r)
                        that.carNumbers = r.res;
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            },
            // 预约车位
            insertOrder() {
                let that = this;
                $.ajax({
                    url: IP_ADDR + "order/saveOrderNotMsg",
                    type: "POST",
                    headers: {
                        "Access-Token": sessionStorage.getItem("Access-Token").toString()
                    },
                    data: {
                        "carportId": that.orderFrom.carportId,
                        "rentalCarportId": that.orderFrom.rentalCarportId,
                        "lessorId": that.orderFrom.user.userId,
                        "orderBeginTime": that.orderFrom.orderBeginTime,
                        "orderEndTime": that.orderFrom.orderEndTime
                    },
                    success(r) {
                        that.$message.success("预约成功");
                    },
                    error(r) {
                        that.$message.error(r.responseJSON.message);
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .el-input {
        width: 300px;
    }
</style>